<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="keywords" content="keyword1,keyword2,keyword3">
    <meta name="description" content="this is my page">
    <meta name="content-type" content="multipart/form-data; charset=UTF-8"/>
    <script type="text/javascript" src="../js/vue.js"></script>
    <script type="text/javascript" src="../js/axios.min.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"/>
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <title>学习资料</title>
</head>
<body>
    <div id="app">
<h2>{{message}}</h2>
    </div>

    <div id="tableView">
        <!--列表顶部搜索和工具条-->
        <el-row>
            <el-form :inline="true" :model="searchForm" class="demo-form-inline">
                <el-form-item label="标题">
                    <el-input v-model="searchForm.title" placeholder="标题"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="el-icon-search" @click="searchClick">查询</el-button>
                    <el-button type="success" icon="el-icon-upload" @click="addClick">创建学习资料</el-button>
                </el-form-item>
            </el-form>
        </el-row>
        <!--列表-->
        <el-row>
            <el-table
                    :data="tableData"
                    v-loading.body="loading"
                    border
                    style="width: 100%">
                <!-- <el-table-column
                        type="selection"
                        width="55">
                </el-table-column> -->
                <el-table-column
                        type="index"
                        label="序号"
                        width="105">
                </el-table-column>
                <el-table-column
                        prop="title"
                        label="标题"
                        width="200">
                </el-table-column>
                <el-table-column
                        prop="time"
                        label="创建时间"

                        width="200">
                </el-table-column>
                <el-table-column
                        label="操作">
                    <template scope="scope">
                        <el-button :plain="true" type="info"  icon="el-icon-download" @click="downloadClick(scope.row)">
                            下载
                        </el-button>
                        <el-button :plain="true" type="danger"  icon="el-icon-delete" @click="deleteClick(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-row>
            <!--列表  End-->
        <!--列表底部工具条和分页符-->
        <el-row style="margin-top: 20px" type="flex" justify="end">
            <!-- <el-col :span="6" >
                <el-button :plain="true" type="danger"  icon="delete" @click="removeSelection">删除所选</el-button>
            </el-col> -->
            <el-col :span="18" >
                <el-pagination
                        style="float: right"
                        @size-change="pageSizeChange"
                        @current-change="currentPageChange"
                        :current-page="currentPage"
                        :page-sizes="[5, 10, 15, 20]"
                        :page-size="pageSize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="total">
                </el-pagination>
            </el-col>
        </el-row>
            <!-- 底部工具栏  End-->
            <!-- from表单-->
        <el-dialog title="创建学习资料" :visible.sync="editFormVisible" :close-on-click-modal="false">
            <el-form :inline="true" :model="messageForm" class="demo-form-inline" :rules="editFormRules" ref="messageForm">
                <el-form-item label="标题：" prop="title">
                    <el-input v-model="messageForm.title" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="资料文件：" prop="file">
                    <el-upload
                            class="upload-demo"
                            action="/questionbank/upload"
                            :on-preview="handlePreview"
                            :before-remove="beforeRemove"
                            multiple
                            :limit="1"
                            :on-success="success"
                            accept=".txt,.docx,.doc,.xlsx"
                            :on-exceed="handleExceed"
                            :file-list="messageForm.filePath"
                    >
                        <el-button size="small" type="primary" icon="el-icon-upload">点击上传</el-button>
                        <div slot="tip" class="el-upload__tip">只能上传txt/docx文件，且不超过500kb</div>
                    </el-upload>
                </el-form-item>
                     </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click.native="editFormVisible = false" @click="resetForm('messageForm')">取消</el-button>
                    <el-button type="primary" @click.native="editSubmit('messageForm')" :loading="editLoading">提交</el-button>
                </div>



        </el-dialog>
        <!-- from表单-->
    </div>











</body>
<script type="text/javascript">
    var top=new Vue({
        el:'#app',
        data:{
            message:'学习资料'
        }
    })
    var tableView=new Vue({
        el:'#tableView',
        data: {
            //列表数据
            tableData: [],
            //显示加载中样式
            loading:false,
            //搜索表单
            searchForm: {
                /* id: '', */
                title: ''
            },
            //当前页
            currentPage:1,
            //分页大小
            pageSize:5,
            //总记录数
            total:800,
            //删除的弹出框
            deleteVisible:false,
            //编辑界面是否显示
            editFormVisible: false,
            editLoading: false,
            goUrl:'',
            editFormRules: {
                title:[
                    { required: true, message: '请输入标题', trigger: 'blur' }
                ]
            },
            messageForm: {
                title:'',
                filePath:[]
            },
        },
            /*
            *       运行即加载   加载数据表格
            * */
        created:function(){
            //在 then的内部不能使用Vue的实例化的this, 因为在内部 this 没有被绑定。
            var self = this;
            var start =(this.currentPage-1)*this.pageSize;
            var end =this.pageSize;
            axios.post('/questionbank/list',{'start':start,'pageSize':end}).then(function(response){
                // console.log(response.data);
                //alert(response.data.total);
                self.total=response.data.total;
                self.tableData = response.data.data;

                // self.multipleSelection=response.data.data;
            })
        },
        methods:{
            loadingData:function() {
                var _self = this;
                _self.loading = true;
                //var self = this;
                var start =(this.currentPage-1)*this.pageSize;
                var end =this.pageSize;
                var searchForm={'start':start,'pageSize':end,'title':this.searchForm.title};
                //   alert(JSON.stringify(searchForm));
                axios.post('/questionbank/list',searchForm).then(function(response){
                    console.log(response.data);
                    //alert(response.data);
                    _self.total=response.data.total;
                    //alert(JSON.stringify(response.data.options));
                    _self.tableData = response.data.data;
                    //_self.multipleSelection=response.data.data;
                })
                console.log(_self.currentPage);
                setTimeout(function(){
                    console.info("加载数据成功");
                    _self.loading = false;
                },300);
            },
            success:function(res, file) {
                this.messageForm.filePath.push(file.response);
            },
            //文件超出限制个数时
            handleExceed:function(files, fileList) {
                this.$message.warning('当前限制选择 1 个文件');
            },
            //移除文件时
            beforeRemove:function(file, fileList) {
                return this.$confirm('确定移除此文件吗?');
            },

                /*
                *   删除事件
                * */
            deleteClick:function(row) {
                var _self = this;
                this.$confirm('确认删除该条数据吗?', '提示', {
                    type: 'warning'
                }).then(function(){
                    var  url="/questionbank/del/"+row.id;
                    axios.get(url).then(function (response) {
                        //alert(response.data);
                        if(response.data>0){
                            _self.$message({
                                message: '删除成功',
                                type: 'success'
                            });
                            _self.loadingData();//重新加载数据
                        }
                    });
                }).catch(function(e){
                    if(e != "cancel")
                        console.log("出现错误：" + e);
                });
            },
            //新建事件
            addClick:function() {
                this.goUrl="/questionbank/add";
                var _self = this;
                this.editFormVisible = true;//弹出层，让隐藏的弹出层显示
                _self.loadingData();//重新加载数据
            },
            //下载事件
            downloadClick:function(row) {
                window.location.href="/questionbank/downLoad?fileName="+row.filePath;
            },
            //取消事件
            resetForm:function(messageForm) {
                this.$refs[messageForm].resetFields();
            },
            //表格查询事件
            searchClick:function() {
                var self = this;
                self.loadingData();//重新加载数据
            },
            //分页大小修改事件
            pageSizeChange:function(val) {
                console.log('每页 ' + val +' 条');
                this.pageSize = val;
                var _self = this;
                _self.loadingData();//重新加载数据
            },
            //当前页修改事件
            currentPageChange:function(val) {
                this.currentPage = val;
                console.log('当前页: ' + val);
                var _self = this;
                _self.loadingData();//重新加载数据
            },
            editSubmit:function(messageForm){
                this.$refs[messageForm].validate((valid) => {
                    if (valid) {
                        var _self = this;
                        _self.loading = true;
                        var formData =this.messageForm;
                        var goUrl=this.goUrl;
                        //alert(JSON.stringify(formData));
                        axios.post(goUrl,formData).then(function(response){
                            console.log(response.data);
                            _self.total=response.data.total;
                            if(response.data>0){
                                _self.editFormVisible = false;// 让弹出层隐藏
                                _self.loadingData();//重新加载数据
                            }
                        })
                        console.info(this.messageForm);
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            /*提示*/
            handlePreview(file) {
                console.log(file);
            },

        }
    })



</script>
</html>